<?php echo $header;?>

<!-- jPList js and css  -->
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-core.min.css" rel="stylesheet" type="text/css" />
<script src="/static/jquery/jquery-plugins/jplist/js/jplist-core.min.js"></script>

<script src="/static/jquery/jquery-plugins/jplist/js/jplist.textbox-control.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-textbox-control.min.css" rel="stylesheet" type="text/css" />

<!-- jplist pagination bundle -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.pagination-bundle.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-pagination-bundle.min.css" rel="stylesheet" type="text/css" />

<!-- jplist history bundle -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.history-bundle.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-history-bundle.min.css" rel="stylesheet" type="text/css" />

<!-- preloader -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.preloader-control.min.js"></script>
<link href="/static/jquery/jquery-plugins/jplist/css/jplist-preloader-control.min.css" rel="stylesheet" type="text/css" />

<!-- filter dropdown control -->
<script src="/static/jquery/jquery-plugins/jplist/js/jplist.filter-dropdown-bundle.min.js"></script>
<link href="/static/admin/cache/index.css" rel="stylesheet">
<link href="/static/bootstrap/css/bootstrap-switch.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap-switch.min.js"></script>
<script src="/static/handlebars-v3.0.3.js"></script>

<style type="text/css">
    .label-info{
        display: inline-block;
        margin-bottom: 3px;
    }
</style>
<div class="container-fluid">
    <div class="row">
        <?php echo $slide_common;?>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h2 class="sub-header">缓存配置</h2>
            <div class="row">
                <div class="col-sm-12">
                    <div id="jplist-page-area" class="box jplist">

                        <!-- ios button: show/hide panel -->
                        <div class="jplist-ios-button">
                            <i class="fa fa-sort"></i>
                            jPList Actions
                        </div>

                        <!-- panel -->
                        <div class="jplist-panel box panel-top">
                            <div class="row">
                                <div class="text-filter-box">

                                    <!--[if lt IE 10]>
                                    <div class="jplist-label">缓存KEY:</div>
                                    <![endif]-->

                                    <input
                                            data-path=".title"
                                            data-button="#cache_key-search-button"
                                            type="text"
                                            value=""
                                            placeholder="缓存KEY"
                                            data-control-type="textbox"
                                            data-control-name="cache_key"
                                            data-control-action="filter"
                                            />

                                    <button
                                            type="button"
                                            id="cache_key-search-button">
                                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                    </button>
                                </div>

                                <div
                                        class="jplist-drop-down"
                                        data-control-type="filter-drop-down"
                                        data-control-name="status"
                                        data-control-action="radio">

                                    <ul>
                                        <li><span data-path="">全部</span></li>
                                        <li><span data-path="0">禁用</span></li>
                                        <li><span data-path="1">启用</span></li>
                                    </ul>
                                </div>
                                <button
                                        style="margin-bottom: 10px;"
                                        type="button"
                                        class="jplist-reset-btn"
                                        data-control-type="reset"
                                        data-control-name="reset"
                                        data-control-action="reset">
                                    重置 &nbsp;<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
                                </button>
                                <button type="button"
                                        class="btn btn-primary"
                                        data-action="addCache"
                                        data-class="action" data-title="新增缓存"
                                        data-url="<?php echo $actions['addCache'];?>">新增缓存</button>
                            </div>
                            <div class="row" style="margin-bottom: 10px;">
                                <div
                                        class="jplist-drop-down"
                                        data-control-type="items-per-page-drop-down"
                                        data-control-name="paging"
                                        data-control-action="paging">

                                    <ul>
                                        <li><span data-number="3"> 每页 3 条 </span></li>
                                        <li><span data-number="5"> 每页 5 条 </span></li>
                                        <li><span data-number="10"> 每页 10 条 </span></li>
                                        <li><span data-number="20" data-default="true"> 每页 20 条 </span></li>
                                        <li><span data-number="50"> 每页 50 条 </span></li>
                                    </ul>
                                </div>

                                <!-- pagination results -->
                                <div
                                        class="jplist-label"
                                        data-type="Page {current} of {pages}"
                                        data-control-type="pagination-info"
                                        data-control-name="paging"
                                        data-control-action="paging">
                                </div>

                                <!-- pagination -->
                                <div
                                        class="jplist-pagination"
                                        data-control-type="pagination"
                                        data-control-name="paging"
                                        data-control-action="paging">
                                </div>

                                <!-- preloader for data sources -->
                                <div
                                        class="jplist-hide-preloader jplist-preloader"
                                        data-control-type="preloader"
                                        data-control-name="preloader"
                                        data-control-action="preloader">
                                    <img src="/static/jquery/jquery-plugins/jplist/img/common/ajax-loader-line.gif" alt="Loading..." title="Loading..." />
                                </div>
                            </div>
                        </div>

                        <!-- ajax content here -->
                        <div class=" row">
                            <table data-filter="#filter" class="table table-bordered table-hover" id="LIST" style="margin:0px;">
                                <thead>
                                <tr>
                                    <th  data-sort-ignore="true" data-class="expand">ID</th>
                                    <th  data-sort-ignore="true" data-class="expand">缓存KEY</th>
                                    <th  data-sort-ignore="true" data-class="expand">缓存值</th>
                                    <th  data-sort-ignore="true">备注</th>
                                    <th  data-sort-ignore="true">缓存最后更新时间</th>
                                    <th  data-sort-ignore="true">新增时间</th>
                                    <th data-sort-ignore="true">操作</th>
                                </tr>
                                </thead>
                                <tbody id="node_list_container">

                                </tbody>
                            </table>

                        </div>

                        <!-- no result found -->
                        <div class="box jplist-no-results text-shadow align-center jplist-hidden">
                            <p>暂无结果！</p>
                        </div>

                        <!-- ios button: show/hide panel -->
                        <div class="jplist-ios-button">
                            <i class="fa fa-sort"></i>
                            jPList Actions
                        </div>


                    </div>
                </div>
            </div>
            <?php echo $footer;?>

        </div>

    </div>

</div>

<script>
    $(function(){
        function render_jplist(){
            var $list = $('#node_list_container')
                    , template = Handlebars.compile($('#jplist-template').html());

            //init jplist with php + mysql data source, json and Mustache template
            $('#jplist-page-area').jplist({
                itemsBox: '.list'
                , itemPath: '.list-item'
                , panelPath: '.jplist-panel'
                , dataSource: {
                    type: 'server'
                    , server: {
                        //ajax settings
                        ajax: {
                            url: "<?php echo $actions['getCacheList'];?>"
                            , dataType: 'json'
                            , type: 'POST'
                            , data: {}
                        }
                    }
                    //render function for json + templates like Mustache, xml + xslt etc.
                    , render: function (dataItem, statuses) {
                        $list.html(template(dataItem.content));
                        //调用开关插件
                        $("input[name=status]").bootstrapSwitch();
                        $('input[name="status"]').on('switchChange.bootstrapSwitch', function(event, state) {
                            $.post(
                                    $(this).data('url'),
                                    {
                                        id: $(this).attr('data-id'),
                                        status: state ? 1 : 0
                                    },
                                    function(res){
                                        layer.msg(res.info, {icon:res.status});
                                        if(res.status == 0){
                                            $('#cache_key-search-button').click();
                                        }
                                    }
                            );
                        });
                    }
                }

            });
        }

        render_jplist();


        $(document).off('click', "[data-class='action']").on('click', "[data-class='action']", function(){
            var current_action = $(this).attr('data-action');
            var _this = $(this);
            switch (current_action){
                case 'addCache':
                    layer.open({
                        type: 1,
                        shadeClose: true,
                        'title': _this.attr('data-title'),
                        area: ['50%', '70%'], //宽高
                        content: $('#add_cache_tpl').html()
                    });
                    $("input[name=status]").bootstrapSwitch();
                    break;

                case 'editCache':
                    $.get(
                        _this.attr('data-url'),
                        {id :   _this.attr('data-id')},
                        function(res){
                            var handlebar = Handlebars.compile($('#edit_cache_tpl').html());
                            layer.open({
                                type: 1,
                                'title': _this.attr('data-title'),
                                shadeClose: true,
                                area: ['50%', '70%'], //宽高
                                content: handlebar(res.data)
                            });
                            $("input[name=status]").bootstrapSwitch();
                        }
                    );

                    break;

                case 'saveAdd':
                    $.post(
                        "<?php echo $actions['addCache'];?>",
                        $(this).parents('form').serialize(),
                        function(data){
                            if(data.status == 1){
                                layer.msg('添加成功',{icon:6, time:1000},function(){
                                    layer.closeAll('page');
                                    $('#cache_key-search-button').click();
                                });
                            }else{
                                layer.msg(data.info, {icon:0});
                            }
                        }
                    );
                    break;
                case 'saveEdit':
                    $.post(
                        "<?php echo $actions['editCache'];?>",
                        $(this).parents('form').serialize(),
                        function(data){
                            if(data.status == 1){
                                layer.msg('编辑成功',{icon:6, time:1000},function(){
                                    layer.closeAll('page');
                                    $('#cache_key-search-button').click();
                                });
                            }else{
                                layer.msg(data.info, {icon:0});
                            }
                        }
                    );
                    break;
                case 'updateCache':
                    $.post(
                            "<?php echo $actions['updateCache'];?>",
                            {id:_this.attr('data-id')},
                            function(data){
                                if(data.status == 1){
                                    layer.msg('清除缓存成功',{icon:6, time:1000},function(){
                                        layer.closeAll('page');
                                        $('#cache_key-search-button').click();
                                    });
                                }else{
                                    layer.msg(data.info, {icon:0});
                                }
                            }
                    );
                    
                    break;
                case 'deleteCache':
                    layer.confirm('确定要删除么？', {icon: 3, title:'提示'}, function(index){
                        //do something
                        if(index){
                            $.post(
                                _this.attr('data-url'),
                                {id: _this.attr('data-id')},
                                function(res){
                                    layer.msg(res.info, {icon:res.status});
                                    res.status == 1 && $('#cache_key-search-button').click();
                                }
                            );
                        }
                    });
                    break;

                default:
                    break;
            }

        });

        Handlebars.registerHelper("formatStatus",function(status){
            var status_html = '';
            switch (status){
                case '0':
                    status_html = '';
                    break;
                default :
                    status_html = 'checked="checked"';
                    break;
            }
            return status_html;
        });

    });
</script>

<!-- Mustache template -->
<script id="jplist-template" type="x-tmpl-mustache">
    {{#.}}
        <tr style="" data-id="">
            <td>{{id}}</td>
            <td>{{cache_key}}</td>
            <td  class="cache-key">{{#if cache_value}}<pre>{{cache_value}}</pre>{{/if}}</td>
            <td>{{description}}</td>
            <td>{{cache_update_time}}</td>
            <td>{{created_time}}</td>
            <td>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-primary" data-class="action" data-action="editCache" data-url="<?php echo $actions['editCache'];?>" data-id="{{id}}" data-title="编辑">编辑</button>
                    <button type="button" class="btn btn-success" data-class="action" data-action="updateCache" data-url="<?php echo $actions['updateCache'];?>" data-id="{{id}}" data-title="清除缓存">清除缓存</button>
                    <button type="button" class="btn btn-danger" data-class="action" data-action="deleteCache" data-url="<?php echo $actions['deleteCache'];?>" data-id="{{id}}">删除</button>
                </div>
            </td>
        </tr>
    {{/.}}
</script>


<!--增加用户模板-->
<script type="text/template" id="add_cache_tpl">
    <div class="container-fluid">
        <form>
            <table class="table table-bordered" style="margin-top: 20px;">
                <tbody>
                <tr>
                    <td>缓存KEY*（必须唯一）</td>
                    <td>
                        <input name="cache_key" value="" class="form-control input-sm" placeholder="缓存KEY" />
                    </td>
                </tr>
                <tr>
                    <td>缓存值</td>
                    <td>
                        <textarea name="cache_value" class="form-control input-sm" placeholder="缓存值"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td>
                        <textarea class="form-control" name="description"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>
                        <button type="button" class="btn btn-primary" data-class="action" data-action="saveAdd">保存</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
</script>

<!--编辑用户模板-->
<script type="text/template" id="edit_cache_tpl">
    <div class="container-fluid">
        <form>
            <table class="table table-bordered" style="margin-top: 20px;">
                <tbody>
                <tr>
                    <td>缓存KEY*（必须唯一）</td>
                    <td>
                        <input name="cache_key" value="{{cache_key}}" class="form-control input-sm" placeholder="缓存KEY" />
                    </td>
                </tr>
                <tr>
                    <td>缓存值</td>
                    <td>
                        <textarea name="cache_value" class="form-control input-sm" placeholder="缓存值">{{cache_value}}</textarea>
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td>
                        <textarea class="form-control" name="description">{{description}}</textarea>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>
                        <input type="hidden" name="id" value="{{id}}" />
                        <button type="button" class="btn btn-primary" data-class="action" data-action="saveEdit">保存</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
</script>